<template>
    <div ref="chartRef" class="stereo-bar-chart"></div>
  </template>
  
  <script setup>
  import { ref, onMounted, onBeforeUnmount } from 'vue';
  import * as echarts from 'echarts';
  
  const chartRef = ref(null);
  let chartInstance = null;
  
  const initChart = () => {
    if (chartRef.value) {
      chartInstance = echarts.init(chartRef.value);
  
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: ['六级计划', '期末复习', '算法备赛', '面试八股',],
          axisLine: {
            lineStyle: {
              color: '#ccc'
            }
          },
          axisTick: {
            show: true
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#ccc'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#f0f0f0'
            }
          }
        },
        series: [
          {
            name: '大型任务完成度',
            type: 'bar',
            //具体数据
            data: [40, 90, 10, 30],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#83bff6' },
                { offset: 0.5, color: '#188df0' },
                { offset: 1, color: '#188df0' }
              ])
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#2378f7' },
                  { offset: 0.7, color: '#2378f7' },
                  { offset: 1, color: '#83bff6' }
                ])
              }
            },
            barWidth: '40%',
            barGap: '0%',
            barCategoryGap: '0%'
          }
        ]
      };
  
      chartInstance.setOption(option);
    }
  };
  
  onMounted(() => {
    initChart();
    window.addEventListener('resize', () => chartInstance.resize());
  });
  
  onBeforeUnmount(() => {
    window.removeEventListener('resize', () => chartInstance.resize());
    chartInstance.dispose();
  });
  </script>
  
  <style scoped>
  .stereo-bar-chart {
    width: 100%;
    height: 300px;
  }
  </style>